<!Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>购物页面</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/album/">



    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.1/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.1/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.1/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.1/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .s {
          -webkit-transition-duration: 0.4s;
          transition-duration: 0.4s;
          padding: 20px 36px;
          text-align: center;
          background-color: white;
          color: black;
          border: 2px solid #860b3c;
          border-radius:20px;
        }

        .s:hover {
            background-color: #eebbc7;
            color: white;
        }
    </style>


  </head>

  <body >
<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>Haixin</strong>
      </a>
        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
          <li><a href="/" class="nav-link px-2 text-white">首页</a></li>
          <li><a href="/no" class="nav-link px-2 text-white">商品分类</a></li>
          <li><a href="/no" class="nav-link px-2 text-white">客服</a></li>
        </ul>

        <form method="post" action="/shopping">
        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3 action">
          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
        </form>
        </form>>

        <div class="text-end">
          <button type="button" class="btn btn-outline-light me-2">Login</button>
          <button type="button" class="btn btn-warning">Sign-up</button>
             </div>
      </div>
    </div>
    </div>
  </div>

    </header>>
</header>
<main>

  <section class="py-5 text-center container">
    <div class="row py-lg-5" >
      <div class="col-lg-6 col-md-8 mx-auto">
        <p><h1 class="fw-light">您好，{{ user_name }},欢迎来到嘻嘻商店</h1></p>
        <p class="lead text-muted"> 空闲时间很无聊，看剧的时候少了点什么，突然嘴馋的时候怎么办？嘻嘻商店囊括了多种类的零食，让嘻嘻商店的零食满足你休闲时光的需求，嘻嘻笑嘻嘻，给自己的生活加点乐趣。质量保真，七天无理由退货，下单就可以获得，大家快来选购吧！</p>
        <p>
          <a href="/cart" class="btn btn-primary my-2">购物车</a>
        </p>
      </div>
    </div>
  </section>
 <form method="post" action="/cart">
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/1.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>

            <div class="card-body">
              <p class="card-text">0 德芙巧克力控糖水果口味巧克力休闲零食小吃可可脂盒装进口旗舰店</p>
                 <p class="card-text,font-color:red;"> ￥ 16</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <input type="checkbox" name="goods" class="btn btn-sm btn-outline-secondary" value="德芙巧克力控糖水果口味巧克力-----￥16">
                </div>
                <small class="text-muted">月销 50+</small>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/23.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>
            <div class="card-body">
              <p class="card-text">1 香飘飘奶茶（经典原味）杯装奶茶冲饮品代餐冲泡奶茶粉</p>
                <p class="card-text,font-color:red;"> ￥ 4</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <input type="checkbox" name="goods" class="btn btn-sm btn-outline-secondary" value="香飘飘奶茶-----￥4">
                </div>
                <small class="text-muted">月销 200+</small>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/24.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>
            <div class="card-body">
              <p class="card-text">2 盼盼食品家庭号虾条烤肉味100g下午茶休闲零食</p>
                <p class="card-text,font-color:red;"> ￥ 6</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <input type="checkbox" name="goods" class="btn btn-sm btn-outline-secondary" value="盼盼家庭号虾条烤肉味100g-----￥6">
                </div>
                <small class="text-muted">月销 200+</small>
              </div>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/25.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>
            <div class="card-body">
              <p class="card-text">3 泓一肉松乳酪吐司夹心面包整箱早餐充饥夜宵蛋糕零食小吃休闲食品</p>
                <p class="card-text,font-color:red;"> ￥ 12.9</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <input type="checkbox" name="goods" class="btn btn-sm btn-outline-secondary" value="泓一肉松乳酪吐司夹心面包整箱-----￥12.9">
                </div>
                <small class="text-muted">月销 100+</small>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/26.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>
            <div class="card-body">
              <p class="card-text">4 汤达人日式酸辣海鲜韩式罗宋五合一袋面速食泡沫方便面</p>
                <p class="card-text,font-color:red;"> ￥ 22.5</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <input type="checkbox" name="goods" class="btn btn-sm btn-outline-secondary" value="汤达人五袋-----￥22.5">
                </div>
                <small class="text-muted">月销 500+</small>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img src="/static/images/27.jpg" class="bd-placeholder-img card-img-top" width="100%" height="100%"  role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" /></img>
            <div class="card-body">
              <p class="card-text">5 可口可乐mini零度无糖汽水碳酸饮料200ml迷你雪碧芬达可乐整箱装</p>
                <p class="card-text,font-color:red;"> ￥ 28</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <input type="checkbox"  name="goods" class="btn btn-sm btn-outline-secondary" value="迷你雪碧芬达可乐整箱装-----￥28">
                </div>
                <small class="text-muted">月销 1000+</small>
              </div>
            </div>
          </div>
        </div>
       <button type="submit" class="s" >结算</button>
      </div>
    </div>
  </div>
 </form>
</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#">Back to top</a>
    </p>
    <p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
    <p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="/docs/5.1/getting-started/introduction/">getting started guide</a>.</p>
  </div>
</footer>


    <script src="/docs/5.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


  </body>
</html>
